<template>
	<view class="content">
		<swiper class="swiper" indicator-dots="true" autoplay="true" interval="3000" duration="500" circular="true">
			<swiper-item>
				<image class="swiper-image" src="/static/医疗咨询.png" mode="aspectFill"></image>
			</swiper-item>
			<swiper-item>
				<image class="swiper-image" src="/static/金融服务.png" mode="aspectFill"></image>
			</swiper-item>
			<swiper-item>
				<image class="swiper-image" src="/static/法律咨询.png" mode="aspectFill"></image>
			</swiper-item>
			<swiper-item>
				<image class="swiper-image" src="/static/教育辅导.png" mode="aspectFill"></image>
			</swiper-item>
			<swiper-item>
				<image class="swiper-image" src="/static/旅游规划.png" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<view class="icon-container">
			<!-- 将view改为button -->
			<button class="icon-item" v-for="(item, index) in icons" :key="index" @click="navigateToPage(item.page)">
				<image class="icon-image" :src="item.image" mode="aspectFit"></image>
				<text class="icon-text">{{item.text}}</text>
			</button>
		</view>

		<!-- 新增产品展示区域 -->
		<view class="product-section">
			<view class="section-title">产品展示</view>
			<view class="products-container">
				<view class="product-item" v-for="(product, index) in products" :key="index">
					<view class="product-image-container">
						<image class="product-image" :src="product.imagePath" mode="aspectFill"></image>
					</view>
					<view class="product-info">
						<text class="product-title">{{product.title}}</text>
						<text class="product-description">{{product.description}}</text>
						<view class="product-tags">
							<text class="tag" v-for="(tag, tagIndex) in product.tags" :key="tagIndex">{{tag}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Welcome',
				icons: [
					{
						image: '/static/图标.png',
						text: 'WiseHub',
						page: '/pages/home/icon1/icon1'
					},
					{
						image: '/static/logo.png',
						text: 'Icon 2',
						page: '/pages/home/test/test'
					},
					{
						image: '/static/logo.png',
						text: 'Icon 3',
						page: '/pages/page3/page3'
					},
					{
						image: '/static/logo.png',
						text: 'Icon 4',
						page: '/pages/page4/page4'
					},
					{
						image: '/static/logo.png',
						text: 'Icon 5',
						page: '/pages/page5/page5'
					},
					{
						image: '/static/logo.png',
						text: 'Icon 6',
						page: '/pages/page6/page6'
					},
					{
						image: '/static/logo.png',
						text: 'Icon 7',
						page: '/pages/page7/page7'
					},
					{
						image: '/static/logo.png',
						text: 'Icon 8',
						page: '/pages/page8/page8'
					},
				],
				// 新增产品数据
				products: [
					{
						id: 1,
						title: '产品名称1',
						description: '这是产品1的详细描述信息，包含产品这是产品6的详细描述信息，包含产品特点和优势。这是产品6的详细描述信息，包含产品特点和优势。特点和优势。',
						imagePath: '/static/医疗.png', 
						tags: ['热门', '新品', '推荐']
					},
					{
						id: 2,
						title: '产品名称2',
						description: '这是产品2的详细描述信息，这是产品6的详细描述信息，包含产品特点和优势。这是产品6的详细描述信息，包含产品特点和优势。包含产品特点和优势。',
						imagePath: '/static/金融.png', 
						tags: ['热销', '限时']
					},
					{
						id: 3,
						title: '产品名称3',
						description: '这是产品3的详细描述信息，包含产品特点和优势。',
						imagePath: '/static/法律.png', 
						tags: ['折扣', '优惠']
					},
										{
						id: 4,
						title: '产品名称4',
						description: '这是产品4的详细描述信息，包含产品特点和优势。',
						imagePath: '/static/教育.png', 
						tags: ['热门', '新品', '推荐']
					},
					{
						id: 5,
						title: '产品名称5',
						description: '这是产品5的详细描述信息，包含产品特点和优势这是产品6的详细描述信息，包含产品特点和优势。这是产品6的详细描述信息，包含产品特点和优势。这是产品6的详细描述信息，包含产品特点和优势。这是产品6的详细描述信息，包含产品特点和优势。。',
						imagePath: '/static/旅游.png', 
						tags: ['热销', '限时']
					},
				]
			}
		},
		onLoad() {

		},
		methods: {
			navigateToPage(page) {
				uni.navigateTo({
					url: page
				});
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: var(--status-bar-height); /* 添加状态栏高度的内边距 */
	}

	.swiper {
		width: 100%;
		height: 400rpx; /* 增加高度以显示完整图片 */
		margin-top: 20rpx; /* 减少上边距 */
	}

	.swiper-image {
		width: 100%;
		height: 100%;
		/* 添加以下属性确保图片完全显示 */
		object-fit: cover;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 50rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.icon-container {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		justify-content: center;
		margin-top: 20rpx;
	}

	.icon-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 10rpx;
		width: 150rpx;  /* 增加宽度，让按钮更明显 */
		height: 150rpx; /* 增加高度 */
		background-color: #f8f8f8; /* 添加背景色 */
		border: 1rpx solid #ddd; /* 添加边框 */
		border-radius: 10rpx; /* 添加圆角 */
		padding: 10rpx; /* 添加内边距 */
		box-sizing: border-box; /* 确保内边距不影响整体大小 */
	}

	.icon-item:active {
		background-color: #e0e0e0; /* 点击时改变背景色 */
		transform: scale(0.95); /* 点击时轻微缩小 */
	}

	.icon-image {
		width: 100rpx;
		height: 100rpx;
	}

	.icon-text {
		font-size: 17rpx;
		color: #333;
		margin-top: 5rpx;
	}

	/* 产品展示区域样式 */
	.product-section {
		width: 100%;
		padding: 30rpx 20rpx;
		box-sizing: border-box;
		margin-top: 50rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		padding-left: 20rpx;
		border-left: 6rpx solid #007AFF;
	}

	.products-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.product-item {
		width: 48%;
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 20rpx;
	}

	.product-image-container {
		width: 100%;
		height: 200rpx;
		overflow: hidden;
		background-color: #f5f5f5;
	}

	.product-image {
		width: 100%;
		height: 100%;
	}

	.product-info {
		padding: 20rpx;
	}

	.product-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
	}

	.product-description {
		font-size: 24rpx;
		color: #666;
		line-height: 1.4;
		margin-bottom: 15rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.product-tags {
		display: flex;
		flex-wrap: wrap;
	}

	.tag {
		font-size: 20rpx;
		color: #007AFF;
		background-color: #E8F4FF;
		padding: 4rpx 12rpx;
		border-radius: 14rpx;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
	}
</style>